import React, {Component} from "react";
import {Card, Form, Modal} from "antd";
import PropTypes from "prop-types";
import md5 from 'md5'
import {BtnsTableVEDNew, EditFormNormal, SearchForm, TableContent, OpenWinAppDomain, OpenWinAppRole } from "../../../widgets";
import {HTTP, getDomain, getOrganNo} from "../../../utils";
import {appInstanceAdd, dealerInfoAdd, dealerInfoDel, dealerInfoList} from "../../../utils/api";
import OpenWinAppArch from '../../../widgets/inputs/instances/OpenWinAppArch'
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";
const FormItem = Form.Item;

class EditModal extends Component {
    static propTypes = {
        initData: PropTypes.any,
        closeFunc: PropTypes.func,
        formReadOnly: PropTypes.any,
        reloadTable: PropTypes.func
    }
    constructor(props) {
        super(props)
    }
    editFields = [ {
        label: '所属架构',
        key: 'producerArchId',
        componentFunc: (props) => (
            <OpenWinAppArch required={true} {...props} />
        )
    }]
    render() {
        const { initData, closeFunc, formReadOnly } = this.props
        return (
            <EditFormNormal
                initData={initData}
                fields={this.editFields}
                onClose={closeFunc}
                readOnly={formReadOnly}
                onSave={this.invokeFormSubmit}
            />
        )
    }

    invokeFormSubmit = (params) => {
        const { closeFunc, reloadTable} = this.props
        console.log('reloadTable', reloadTable)
        params.producerOrganNo = getOrganNo()
        params.appDomain = 'WINDER-DEALER'
        HTTP.post(dealerInfoAdd, params, () => {
            closeFunc()
        }, (resp) => {
            Modal.success({
                title: '提示',
                content: '保存成功'
            })
            reloadTable()
        })
    }
}

export default class extends Component {

    static contextTypes = {
        router: PropTypes.object
    }

    constructor(props) {
        super(props);
        this.table = undefined
        this.state = {
            searchParam: {producerOrganNo: getOrganNo()}
        }
    }

    seaFields = [{
        label: '名称',
        key: 'name'
    }]

    seaBtns = []

    // seaBtns = [{
    //     label: '新增',
    //     onClick: () => {
    //         this.setState({
    //             addVisible: true
    //         })
    //     }
    // }]

    columns = [{
        title: '名称',
        dataIndex: 'dealerOrganName',
        key: 'dealerOrganName',
    }, {
        title: '机构编号',
        dataIndex: 'dealerOrganNo',
        key: 'dealerOrganNo'
    }, {
        title: '所属架构',
        dataIndex: 'producerArchName',
        key: 'producerArchName'
    }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <BtnsTableVEDNew
                renderView= { (closeFunc) => {
                    return (
                        <EditModal
                            initData={record}
                            closeFunc={closeFunc}
                            reloadTable={ () => { this.table.loadData() }}
                        />
                    )
                }}
                renderEdit = { (closeFunc) => {
                    return (
                        <EditModal
                            initData={record}
                            closeFunc={closeFunc}
                            reloadTable={ () => { this.table.loadData() }}
                        />
                    )
                }}
                onDel={() => this.invokeDelete(record)}
            />
        ),
    }]

    render() {
        return (
            <div>
                <BreadcrumbCustom first="经销商管理" second="经销商管理" />
                <Card title="经销商管理" bordered={false}>
                    <SearchForm fields={this.seaFields} btns={this.seaBtns} onSearch={this.onSearch}/>
                    <TableContent
                        ref={(e) => {this.table = e}}
                        columns={this.columns}
                        url = {dealerInfoList}
                        searchParam={this.state.searchParam}
                    />
                    {
                        this.state.addVisible && (
                            <EditModal
                                closeFunc={this.hideAddForm}
                                reloadTable={ () => { this.table.loadData() }}
                            />
                        )
                    }
                </Card>
            </div>
        )
    }

    hideAddForm = () => {
        this.setState({
            addVisible: false
        })
    }

    onSearch = (values) => {
        this.setState({
            searchParam: Object.assign({}, this.state.searchParam, values)
        }, () => {
            this.table.loadData()
        })
    }

    invokeDelete = (record) => {
        HTTP.post(dealerInfoDel, record, () => {}, (resp) => {
            this.table.loadData()
        })
    }

    // syncDealerMenu = () => {
    //     const params = {organNo: getOrganNo()}
    //     HTTP.post(dealerMenuSync, params, () => {}, (resp) => {
    //         console.log(resp)
    //     });
    // }
}
